<template>
    <div>
      <div id="b" style="margin-left:160px">
          <el-col :offset="5" :span="18">
            <el-row>
              <el-col :offset="12" :span="12">
                <a class="header_a">适老化及无障碍</a>
                <a class="header_a">请登录</a>
                <span class="header_a">或</span>
                <a class="header_a">免费注册</a>
                <a class="header_a">消息</a>
                <a class="header_a">查看订单</a>
                <a class="header_a">积分商城</a>
                <a class="header_a">联系客服</a>
              </el-col>
            </el-row>
          </el-col>
          <el-col>
            <el-row>
              <el-col :span="19">
                <img class="header_img" style="width: 136px;height: 54px" src="https://s.qunarzz.com/f_cms/2021/1638865973476_447461838.png"/>
                <a class="header_a2">首页</a>
                <a class="header_a2">机票</a>
                <a class="header_a2">酒店</a>
                <a class="header_a2">团购</a>
                <a class="header_a2">度假</a>
                <a class="header_a2">邮轮</a>
                <a class="header_a2">门票</a>
                <a class="header_a2">火车票</a>
                <a class="header_a2">攻略</a>
                <a class="header_a2">当地人</a>
                <a class="header_a2">汽车票</a>
              </el-col>
            </el-row>
          </el-col>
        </div>
      <div style="width: auto; background-image: url(//s.qunarzz.com/open_m_train/train_pc/pc-banner.jpg)" >
        <div id="a"  style="margin-left:160px">
          <h1>汽车票预定</h1>
          <el-tabs  >
            <el-tab-pane label="国内汽车票" >
              <el-form ref="cart" :model="cart" label-width="10px" style="width: auto">

                <el-form-item  >
                  <el-col :span="11">
                    <el-input v-model="cart.carSname" placeholder="请输入要出发的城市名称"></el-input>
                  </el-col>
                  <el-col class="line" :span="1" >=></el-col>
                  <el-col :span="11">
                    <el-input v-model="cart.carSname" placeholder="请输入要到达的城市名称"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item >
                  <el-col :span="17">
                    <div style="font-size: 15px;color: red">
                      24小时客服电话：95117 <br>全程预订保障 去哪儿都放心
                    </div>
                  </el-col>
                  <el-button type="primary" @click="onSubmit(cart.carSname,cart.carEname)">搜索</el-button>

                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <div class="demo-image"  style="padding-top: 50px ;margin-left:160px">
        <div class="block" v-for="fit in fits" :key="fit">
          <el-image
            style="width: auto; height: 170px"
            :src="url2"
            :fit="fit"></el-image>
          <el-image
            style="width: auto; height: 170px"
            :src="url3"
            :fit="fit"></el-image>
          <el-image
            style="width: auto; height: 170px"
            :src="url"
            :fit="fit"></el-image>

        </div>
      </div>


      <div style="padding-top: 50px;margin-left:160px ">
        <div>
          <h3 style="display: inline;
                  font: normal 24px/24px Microsoft Yahei;
                  color: #0e83bf;">
            国内火车票
          </h3>
          <a style=" margin-left: 400px ; font-size: 18px;  display: inline-block;">西安|</a>
          <a style="  font-size: 18px;  display: inline-block;">成都|</a>
          <a style="  font-size: 18px;  display: inline-block;">上海|</a>
          <a style="  font-size: 18px;  display: inline-block;">重庆|</a>
          <a style="  font-size: 18px;  display: inline-block;">深圳|</a>
          <a style="  font-size: 18px;  display: inline-block;">广州|</a>
          <a style="  font-size: 18px;  display: inline-block;">杭州|</a>
          <a style="  font-size: 18px;  display: inline-block;">北京</a>
        </div>
        <div style=" width: 920px; height: 490px;border:2px solid  #0e83bf; ">
          <div id="left-1">
            <div >
              <form style="padding-top: 15px" :ref="cartslist" v-for="carts in cartslist" :key="carts.carId">
                &nbsp; &nbsp; &nbsp; &nbsp;
                <span>{{ carts.carSname }}</span>
                <i class="el-icon-right"></i>
                <span>{{ carts.carEname }}</span>
                &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                <span>{{ carts.carStime }}</span>
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                <span>￥{{ carts.carPrice }}</span>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div style="padding-top: 50px;margin-left:160px">
        <img style="width: 1100px;" src="../assets/5.jpg">
      </div>


    </div>
</template>

<script>
    export default {
      name: "cartIndex",
      data() {
        return {
          cart: {
            carSname: '',
            carEname: ''
          },
          fits: ['fill'],
          url: 'http://s34vr5tr7.hn-bkt.clouddn.com/pc_banner_2.jpg',
          url3: "https://pic.90sheji.com/back_origin_pic/05/65/07/a3cd4c8ae2ce08fb3e424d43931433dc.jpg%21/fwfh/1970x0/clip/0x1308a0a0/quality/90/unsharp/true/compress/true/watermark/url/LzkwX3dhdGVyX3Y2LnBuZw==/repeat/true",
          url1: 'https://s.qunarzz.com/flight_seat_rn/images/desktop/home_link.png',
          url2: 'https://preview.qiantucdn.com/ing/73/02/89/15b58PICJZPx4Phfp4bJf_PIC2018.jpg%21qt720_jpg',
          cartslist: {
            carId: '',
            carSname: '',
            carEname: '',
            carStime: '',
            carEtime: '',
            carPrice: '',
            carNumber: '',
            carSeat: '',
            carType: ''
          },
        }
      },
      methods: {
          onSubmit(carSname,carEname){
              this.$router.push({path:'/cartshow',query:{carSname:carSname,carEname:carEname}})
          },
        findAll() {
          this.$axios.get('/cart/findAllCart').then(res=>{
            console.log(res);
            this.cartslist=res.data.data.records;
          })
        },

      },
      mounted(){
        this.findAll();
      }

    }

</script>

<style scoped>
  #a{
    width: 650px;
    height: 336px;
    border: 6px solid #00afc7;
    background: #fff;
  }
  #b{
    width: 1200px;
    height:90px;
  ;
  }
  #left-1{
    width: 460px;
    height: 490px ;

    float: left;
  }
  #left-2{
    width: 460px;
    height: 490px ;

    float: left;
  }
  .header_a{
    font-size: 12px;
    margin-top: 0px;
    margin-left: 5px;
  }
  .header_img{
    float: left;
    margin-bottom: 0px;
  }
  .header_a2{
    font-size: 15px;
    font-family: "Hiragino Sans GB";
    float: left;
    margin-right: 12px;
    margin-top: 30px;
  }

</style>
